{extend name="v1/layout/base"}
{block name="content"}
<style media="screen">
  .layui-card-body .layui-table {
    margin: 0;
  }

  .xz666 .xk-del-pic {
    position: relative;
    top: 0;
    left: 0;
    margin-left: 10px;
  }

  .inputSpecValue {
    width: 100px !important;
    height: 36px;
    line-height: 1.3;
    border: 1px solid #087;
    margin-left: 5px;
    background-color: #fff;
  }

  .inputSpec {
    width: 200px !important;
    height: 38px;
    line-height: 1.3;
    border: 1px solid #087;
    margin: 5px;
    background-color: #fff;
  }

  .addSpecValue {
    margin-left: 5px;
  }

  .sureAddSpec {
    margin-left: 5px;
  }

  .sureAddSpecValue {
    margin-left: 5px;
  }

  .xk-spec-delete {
    position: relative;
    display: inline-block;
  }

  .xk-spec-delete2 {
    position: relative;
    display: inline-block;
    top: -5px;
  }

  .xk-spec-delete3 {
    position: relative;
    display: inline-block;
  }

  .xk-spec-delete4 {
    position: relative;
    display: inline-block;
    float: left;
  }

  .xk-spec-close {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;

  }

  .xk-spec-close i {
    font-size: 10px;
  }

  .xk-spec-delete2 .xk-spec-close,
  .xk-spec-delete3 .xk-spec-close {
    display: flex;
  }

  .xz_scroll {
    min-width: 1350px;
    max-height: 500px;
  }

  .xz_scrollp {
    overflow: auto;
  }

  ::-webkit-scrollbar {
    height: 15px !important;
  }
  .layui-form-checkbox span,
    .layui-form-checkbox:hover span {
      background:#343434;
  }
  .layui-form-checked span, .layui-form-checked:hover span {
      background-color: #5FB878;
  }



</style>
<form class="layui-card-body layui-form layui-form-pane">
  <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
      <li class="layui-this">基础信息</li>
      <li>商品详情</li>
      <li>商品规格</li>
      <!-- <li>商品参数</li> -->
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8" style="color:#000;text-align: center;">
                <hr class="layui-border-red">基本信息
                <hr class="layui-border-red">
              </div>
            </div>
            <!-- 产品名称 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品名称：</label>
                <div class="layui-input-block">
                  <input type="text" name="goods_name" lay-verify="required" lay-reqtext="请输入产品名称" placeholder="请输入产品名称" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <!-- 商品条码 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">商品条码：</label>
                <div class="layui-input-block">
                  <input type="text" name="goods_sn" placeholder="请输入商品条码" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <!-- 产品分类 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">所属产品分类：</label>
                <div class="layui-input-block">
                  <select name="goods_cate_id" id="goods_cate_id" lay-filter="firstCateSelect" lay-verify="required" lay-reqtext="请选择商品分类" lay-search>
                    <option value="">请选择商品分类</option>
                    {volist name="goods_cate_list" id="vo"}
                    <option value="{$vo.goods_cate_id}">{$vo.goods_cate_name}</option>
                    {/volist}
                  </select>
                </div>
              </div>
            </div>
            <!-- 所属店铺 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">所属仓库：</label>
                <div class="layui-input-block">
                  <select name="store_id" id="store_id" lay-filter="storeSelect" lay-verify="required" lay-reqtext="请选择所属仓库" lay-search>
                    <option value="">请选择所属仓库</option>
                    {volist name="store_list" id="vo"}
                    <option value="{$vo.store_id}">{$vo.store_name}</option>
                    {/volist}
                  </select>
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品简介：</label>
                <div class="layui-input-block">
                  <input type="text" name="keywords" lay-verify="required" lay-reqtext="产品简介" placeholder="产品简介" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8" style="color:#000;text-align: center;">
                <hr class="layui-border-red">图片信息
                <hr class="layui-border-red">
              </div>
            </div>
            <!-- 产品缩略图 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品缩略图：</label>
                <div class="layui-input-block">
                  <div class="layui-upload">
                    <div class="xk-big-show" datasrc="__COMMON__images/no_pic.png">
                      <input type="hidden" class="xk-picurl" name="picurl" value="">
                      <img class="layui-upload-img  xk-img upload-pic" id="img-show-1" src="__COMMON__images/no_pic.png" width="100px" height="100px">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 产品视频 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品视频：</label>
                <div class="layui-input-block xk-upload-video">
                  <div class="layui-upload-drag" id="xk-videoUpload"><i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <div class="layui-hide" id="uploadDemoView">
                      <hr><img src="" alt="上传成功后渲染" style="max-width: 196px">
                    </div><input type="hidden" name="fileurl" value="">
                  </div>
                </div>
              </div>
            </div>
            <!-- 产品组图 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品组图：</label>
                <div class="layui-input-block">
                  <div id="app">
                    <div class="main">
                      <div class="upload">
                        <div class="upload_warp" @click="fileClick" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
                          <img src="__XKSHOP__/js/vueSortable/img/upload.png">
                          <div class="txt">点击上传或者将文件拖到此处</div>
                        </div>
                        <div class="upload_warp_text">
                          选中{{imgList.length}}个文件，共{{bytesToSize(this.size)}}
                          <span class="notice">[单个附件的最大尺寸为5MB]</span>
                        </div>
                        <input @change="fileChange($event)" type="file" id="upload_pic_arr" multiple style="display: none">
                        <div class="upload_warp_img" v-show="imgList.length!=0">
                          <div class="upload_warp_img_div" v-for="(item,index) of imgList" :key="index">
                            <div class="upload_warp_img_div_top">
                              <div class="upload_warp_img_div_text">
                                {{item.file.name}}
                              </div>
                              <img src="__XKSHOP__/js/vueSortable/img/del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
                              <input type="hidden" name="pic_arr[]" v-model="item.file.picurl">
                              <input type="hidden" name="pic_name[]" v-model="item.file.name">
                              <input type="hidden" name="pic_size[]" v-model="item.file.size">
                            </div>
                            <img :src="item.file.show_picurl">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8" style="color:#000;text-align: center;">
                <hr class="layui-border-red">价格信息&&库存信息
                <hr class="layui-border-red">
              </div>
            </div>
            <!-- 产品售价 -->
            <!-- <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品售价(元)：</label>
                <div class="layui-input-block">
                  <input type="text" name="selling_price" value="0.00" placeholder="请输入产品售价" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div> -->
            <!-- 产品市场价 -->
            <!-- <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品市场价(元)：</label>
                <div class="layui-input-block">
                  <input type="text" name="market_price" value="0.00" placeholder="请输入产品市场价" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div> -->
            <!-- 业绩系数 -->
            <!-- <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">业绩系数(0-1)：</label>
                <div class="layui-input-block">
                  <input type="text" name="achievement_bili" value="0.00" placeholder="请输入业绩系数" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div> -->
            <!-- 固定佣金金额 -->
            <!-- <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">首购固定佣金金额(条件必填)：</label>
                <div class="layui-input-block">
                  <input type="text" name="bonus_price" value="0.00" placeholder="固定佣金金额" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div> -->
            <!-- <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">复购固定佣金金额(条件必填)：</label>
                <div class="layui-input-block">
                  <input type="text" name="next_bonus_price" value="0.00" placeholder="固定佣金金额" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div> -->
            <!-- 复购计算比例 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">复购价格计算比例(0-1)：</label>
                <div class="layui-input-block">
                  <input type="text" name="vip_buy_bili" value="0.90" placeholder="复购价格计算比例" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <!-- 产品销量 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品销量：</label>
                <div class="layui-input-block">
                  <input type="number" name="shell_num" value="0" placeholder="请输入产品销量，多规格库存根据规格进行计算" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8" style="color:#000;text-align: center;">
                <hr class="layui-border-red">上架推荐信息
                <hr class="layui-border-red">
              </div>
            </div>
            <!-- 是否上架 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">是否上架：</label>
                <div class="layui-input-block">
                  <input type="radio" name="is_onsell" value="1" title="上架" checked>
                  <input type="radio" name="is_onsell" value="0" title="不上架">
                </div>
              </div>
            </div>

            <!-- 是否推荐 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">是否推荐：</label>
                <div class="layui-input-block">
                  <input type="radio" name="is_tj" value="1" title="推荐">
                  <input type="radio" name="is_tj" value="0" title="不推荐" checked>
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">佣金计算方式：</label>
                <div class="layui-input-block">
                  <input type="radio" name="bonus_type" value="0" title="业绩计算" checked />
                  <input type="radio" name="bonus_type" value="1" title="固定金额" >
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">是否单品拆单：</label>
                <div class="layui-input-block">
                  <input type="radio" name="is_supper" value="0" title="不拆单" checked />
                  <input type="radio" name="is_supper" value="1" title="拆单" >
                </div>
              </div>
            </div>
            <!-- 产品排序 -->
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">排序编号：</label>
                <div class="layui-input-block">
                  <input type="number" name="order_id" value="0" placeholder="请输入产品属性编号" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-tab-item">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品详情：</label>
                <div class="layui-input-block">
                  <textarea name="content" id="content"></textarea>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="layui-tab-item">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">产品属性：</label>
                <div class="layui-input-block">
                  <select name="goods_attr_id" lay-filter="goods-attr-chanage" lay-search>
                    <option value="">请选择产品属性</option>
                    {volist name="$goods_attr_list" id="vo"}
                    <option value="{$vo.goods_attr_id}">{$vo.goods_attr_name}</option>
                    {/volist}
                  </select>
                </div>
              </div>
            </div>
            <div class="layui-row layui-col-space10 layui-form-item xk-spec-value">

            </div>
            <div class="layui-row layui-col-space10 layui-form-item xk-spec-new">
              <div class="layui-col-lg10 ">
                <button type="button" class="layui-btn layui-btn-normal addSpec" style="margin-left:5px;">新建规格组</button>
              </div>
            </div>
            <div class="layui-row layui-col-space12 layui-form-item xk-spec-text">
              <div class="layui-col-lg10">
                <label class="layui-form-label">产品规格关联：</label>
                <div class="layui-input-block xz_scrollp">
                  <div class="xz_scroll xk-spec-value-show">


                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="layui-tab-item">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg8">
                <label class="layui-form-label">商品参数：</label>
                <div class="layui-input-block">
                  <table class="layui-table" lay-size="lg">
                    <thead>
                      <tr>
                        <th>参数名称</th>
                        <th>参数值</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                      <tr>
                        <td colspan="3" style="text-align: center;">
                          <button type="button" class="layui-btn layui-btn-sm add-parameters"><i class="layui-icon layui-icon-add-circle-fine"></i></button>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 底部操作按钮 -->
      <div class="layui-row">
        <div class="layui-col-xs3">&nbsp;</div>
        <div class="layui-col-xs4">
          <input type="hidden" name="act" value="create" />
          <input type="hidden" name="is_new" value="0">
          <input type="hidden" name="is_onself" value="1">
          <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" id="infoBackList"><i class="layui-icon">&#xe65c;</i>返回列表</button>
          <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" lay-submit lay-filter="saveBtn"><i class="layui-icon">&#xe609;</i>立即更新</button>
        </div>
        <div class="layui-col-xs5">&nbsp;</div>
      </div>
      <!-- 底部操作按钮结束 -->
    </div>
  </div>
</form>
{/block}
{block name="myUpload"}
{include file="v1/layout/upload"}
{/block}
{block name="myScript"}
<!-- 多图片上传开始 -->
<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        imgList: [],
        size: 0,
        sortList: Object
      }
    },
    methods: {
      fileClick() {
        document.getElementById('upload_pic_arr').click()
      },
      fileChange(el) {
        if (!el.target.files[0].size) return;
        this.fileList(el.target);
        el.target.value = ''
      },
      fileList(fileList) {
        let files = fileList.files;
        var _this = this;
        for (let i = 0; i < files.length; i++) {
          var file = files[i];
          if (file.type != '') { //常规文件判断
            if (file.size > 5 * 1024 * 1024) {
              alert("文件尺寸不能超过5M");
              return;
            }
            _this.fileAdd(file);
          } else {
            try {
              var fileReader = new FileReader();
              fileReader.readAsDataURL(file.slice(0, 4));
              fileReader.addEventListener('load', function(e) {
                if (file.size > 5 * 1024 * 1024) {
                  alert("文件尺寸不能超过5M");
                  return;
                }
                _this.fileAdd(file);
              }, false);
              fileReader.addEventListener('error', function(e) {
                alert("不可以上传文件夹1");
              }, false);
            } catch (e) {
              alert("不可以上传文件夹2");
            }

          }
        }
      },
      //文件添加
      fileAdd(file) {
        //总大小
        this.size = this.size + file.size;
        //判断是否为图片文件
        if (file.type.indexOf('image') == -1) {
          file.src = 'img/wenjian.png';
          this.imgList.push({
            file
          });
        } else {
          let reader = new FileReader();
          reader.vue = this;
          reader.readAsDataURL(file);
          reader.onload = function() {
            var formData = new FormData();
            formData.append('file', file);
            file.src = this.result;
            uploadBase64('/common/upload/uploadImg', formData, 'post', true, '正在上传').then(resp => {
              file.picurl = resp.resultData.upload_url;
              file.show_picurl = resp.resultData.show_url;
              this.vue.imgList.push({
                file
              });
            })
          }
        }
      },
      base64toFile(data, fileName) {
          const dataArr = data.split(",");
          const byteString = atob(dataArr[1]);
          const options = {
            type: "image/jpeg",
            endings: "native"
          };
          const u8Arr = new Uint8Array(byteString.length);
          for (let i = 0; i < byteString.length; i++) {
            u8Arr[i] = byteString.charCodeAt(i);
          }
          return new File([u8Arr], fileName + ".jpg", options);//返回文件流
    },
      //文件删除
      fileDel(index) {
        this.size = this.size - this.imgList[index].file.size; //总大小
        this.imgList.splice(index, 1);
      },
      //文件大小格式转换
      bytesToSize(bytes) {
        if (bytes === 0) return '0 B';
        let k = 1000, // or 1024
          sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
          i = Math.floor(Math.log(bytes) / Math.log(k));
        return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
      },
      //拖动目标且鼠标进入投放区时触发
      dragenter(el) {
        el.stopPropagation();
        el.preventDefault();
      },
      //拖动目标且鼠标移动在投放区时触发
      dragover(el) {
        el.stopPropagation();
        el.preventDefault();
      },
      //拖动对象且在投放区放开鼠标时触发，要先在dragover上设置禁止默认事件，才会有触发
      drop(el) {
        el.stopPropagation();
        el.preventDefault();
        this.fileList(el.dataTransfer);
      }
    },
    mounted() {
      var $ul = this.$el.querySelector('.upload_warp_img');
      this.sortList = Sortable.create($ul, {
        handle: '.upload_warp_img_div',
        draggable: ".upload_warp_img_div",
        animation: 150,
        onUpdate: (event) => {
          var newIndex = event.newIndex,
            oldIndex = event.oldIndex
          $li = $ul.children[newIndex],
            $oldLi = $ul.children[oldIndex]
          // 先删除移动的节点
          $ul.removeChild($li)
          // 再插入移动的节点到原有节点，还原了移动的操作
          if (newIndex > oldIndex) {
            $ul.insertBefore($li, $oldLi)
          } else {
            $ul.insertBefore($li, $oldLi.nextSibling)
          }
          var item = this.imgList[event.oldIndex];
          this.imgList.splice(event.oldIndex, 1);
          this.imgList.splice(event.newIndex, 0, item);
        }
      })
    }
  })
</script>
<!-- 多图片上传结束 -->
<!-- 页面js开始 -->
<script>
  layui.use(['form', 'upload'], function() {
    var form = layui.form,
      layer = layui.layer,
      upload = layui.upload,
      parent_id = 0,
      level = 1,
      first_cate_id = 0,
      second_cate_id = 0,
      third_cate_id = 0;
    spec = [];
    $ = layui.$;
    $(".xk-spec-text").hide();
    $(".xk-spec-new").hide();
    $(".xk-choose-shipping-template").hide();
    //监听提交
    form.on('submit(saveBtn)', function(data) {
      var spec_list = getAllSpec();
      var datax = data.field;
      datax.spec_list = spec_list;
      url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Goods/goodsSave')}";
      https(url, datax, 'post', 1, '正在保存信息').then(res => {
        xkMsg(res.result_msg);
      }, fail => {})
      return false;
    });
    // -----------------
    // 产品属性参数相关
    // --------------------
    form.on('select(goods-attr-chanage)', function(data) {
      $(".xk-spec-value").html('');
      $(".xk-spec-value-show").html('');
      $(".xk-spec-text").hide();
      $(".xk-spec-new").hide();
      if (data.value > 0) {
        getSpecList(data.value);
      }
    });

    function getSpecList(goods_attr_id) {
      var goods_id = 0,
        url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Goods/getSpecList')}";
      // 开始获取对应规格信息
      https(url, {
        goods_attr_id: goods_attr_id,
        goods_id: goods_id
      }, 'post', 0, '').then(res => {
        var list = res.resultData.list,
          html = '';
        $.each(list, function(i, data) {
          html += '<div class="layui-col-lg10" data-spec_key="' + (i + data.jichu) + '"><div class="xk-spec-delete4"><label class="layui-form-label">' + data.spec_name +
            '</label><span class="xk-spec-close"><i class="layui-icon layui-icon-close"></i></span></div><div class="layui-input-block" >';
          if (data.getSpecValue.length > 0) {
            $.each(data.getSpecValue, function(index, sku_value) {
              html += '<div class="xk-spec-delete"><input lay-filter="specCheck" type="checkbox" name="spec" title="' + sku_value['spec_value'] + '" data-spec_key="' + (i + data.jichu) + '" data-key="' + (index + data.jichu) +
                '"><span class="xk-spec-close"><i class="layui-icon layui-icon-close"></i></span></div>';
            })
          }
          html += '<button type="button" class="layui-btn layui-btn-normal addSpecValue" style="margin-left:15px;margin-bottom:10px;">新增</button></div></div>';
        });

        $(".xk-spec-value").append(html);
        $(".xk-spec-new").show();
        form.render();
      })
    }
    // 关于新增选项值
    $(".xk-spec-value").on('click', '.addSpecValue', function() {
      html = '<div class="xk-spec-delete2"><input type="text" class="inputSpecValue"><span class="xk-spec-close"><i class="layui-icon layui-icon-close"></i></span></div>';
      $(this).before(html);
      $(this).replaceWith('<button type="button" class="layui-btn layui-btn-default sureAddSpecValue" name="button">确认添加</button>')
      console.log(12121);
    })
    // 确认新增选项值
    $(".xk-spec-value").on('click', '.sureAddSpecValue', function() {
      var spec_value = $(this).siblings(".xk-spec-delete2").find(".inputSpecValue").val().trim()
      var has_all_lenght = $(this).siblings(".xk-spec-delete2").prevAll('.xk-spec-delete').length
      if (has_all_lenght == 0) {
        var has_length = -3920;
      } else {
        var has_length = parseInt($(this).siblings(".xk-spec-delete2").prev('.xk-spec-delete').find('input[name="spec"]').attr('data-key')) + 1;
        if (has_length > 0) {
          has_length = -3920;
        }
      }
      var spec_key = $(this).parents('.layui-col-lg10').attr('data-spec_key');
      if (spec_value == '') {
        layer.msg("请填写需要增加的规格值", {
          time: 1000
        });
        return false;
      }
      $(this).siblings(".xk-spec-delete2").replaceWith('<div class="xk-spec-delete"><input lay-filter="specCheck" type="checkbox" name="spec" title="' + spec_value +
        '" data-key="' + has_length + '" data-spec_key="' + spec_key + '" ><span class="xk-spec-close"><i class="layui-icon layui-icon-close"></i></span></div>');
      $(this).replaceWith('<button type="button" class="layui-btn layui-btn-normal addSpecValue" style="margin-left:15px;margin-bottom:10px;">新增</button>')
      form.render();
    })
    // 删除新增选项值
    $(".xk-spec-value").on('click', '.xk-spec-delete .xk-spec-close', function() {
      $(this).parents(".xk-spec-delete").remove();
      form.render();
      checkSpec();
    })
    // 删除新增输入选项
    $(".xk-spec-value").on('click', '.xk-spec-delete2 .xk-spec-close', function() {
      $(this).parents(".xk-spec-delete2").siblings(".sureAddSpecValue").replaceWith('<button type="button" class="layui-btn layui-btn-normal addSpecValue" style="margin-left:5px;">新增</button>');
      $(this).parents(".xk-spec-delete2").remove();
      form.render();
    })
    // 新增规格
    $(".xk-spec-new").on('click', '.addSpec', function() {
      var html = '<div class="xk-spec-delete3"><input type="text" class="inputSpec"><span class="xk-spec-close"><i class="layui-icon layui-icon-close"></i></span></div>';
      $(this).before(html);
      $(this).replaceWith('<button type="button" class="layui-btn layui-btn-default sureAddSpec" name="button">确认添加</button>')
    })
    // 确认执行新增规格
    $(".xk-spec-new").on('click', '.sureAddSpec', function() {
      var spec_name = $(this).siblings(".xk-spec-delete3").find(".inputSpec").val().trim()
      var has_all_lenght = $('.xk-spec-value').children('.layui-col-lg10').length
      if (has_all_lenght == 0) {
        var has_length = -3920;
      } else {
        var has_length = parseInt($('.xk-spec-value').children('.layui-col-lg10:last-child').attr('data-spec_key')) + 1;
        if (has_length > 0) {
          has_length = -3920;
        }
      }
      if (spec_name == '') {
        layer.msg("请填写需要新增的规格项", {
          time: 1000
        });
        return false;
      }
      if (has_length == NaN) {
        has_length = -3920;
      }
      var html = '<div class="layui-col-lg10" data-spec_key="' + has_length + '"><div class="xk-spec-delete4"><label class="layui-form-label">' + spec_name +
        '</label><span class="xk-spec-close"><i class="layui-icon layui-icon-close"></i></span></div> <div class="layui-input-block" >';
      html += '<button type="button" class="layui-btn layui-btn-normal addSpecValue" style="margin-left:15px;">新增</button></div></div>';
      $(this).siblings(".xk-spec-delete3").remove();
      $(".xk-spec-value").append(html);
      $(this).replaceWith('<button type="button" class="layui-btn layui-btn-normal addSpec" style="margin-left:15px;">新增</button>')
      $(".xk-spec-new").show();
      form.render();
    })
    // 新增规格输入框删除
    $(".xk-spec-new").on('click', '.xk-spec-delete3 .xk-spec-close', function() {
      $(this).parents(".xk-spec-delete3").siblings(".sureAddSpec").replaceWith('<button type="button" class="layui-btn layui-btn-normal addSpec" style="margin-left:5px;">新增</button>');
      $(this).parents(".xk-spec-delete3").remove();
      form.render();
    })
    // 规格删除
    $(".xk-spec-value").on('click', '.xk-spec-delete4 .xk-spec-close', function() {
      $(this).parents(".layui-col-lg10").remove();
      form.render();
      checkSpec();
    })
    // 鼠标移入
    $('.xk-spec-value').on('mouseover', '.xk-spec-delete,.xk-spec-delete4', function() {
      $(this).find('.xk-spec-close').css('display', 'flex')
    })
    // 鼠标移出
    $('.xk-spec-value').on('mouseout', '.xk-spec-delete,.xk-spec-delete4', function() {
      $(this).find('.xk-spec-close').css('display', 'none')
    })
    form.on('checkbox(specCheck)', function(data) {
      checkSpec();
    });

    function checkSpec() {
      var all_spec = {},
        spec_value_arr = [];
      $(".xk-spec-value .layui-col-lg10").each(function(i, data) {
        var spec_key = $(this).attr('data-spec_key').toString(),
          spec_name = $(this).find('label').text();
        $(this).find('.xk-spec-delete').each(function(index, res) {
          var key = $(this).find('input[name="spec"]').attr('data-key'),
            spec_value = $(this).find('input[name="spec"]').attr('title');
          if ($(this).find('input[name="spec"]').is(':checked')) {
            if (!all_spec.hasOwnProperty(spec_key))
              all_spec[spec_key] = {};
            if (!all_spec[spec_key].hasOwnProperty('name'))
              all_spec[spec_key]['name'] = spec_name;
            if (!all_spec[spec_key].hasOwnProperty('spec_name'))
              all_spec[spec_key]['spec_name'] = [];
            spec_value_arr = {};
            spec_value_arr['sku_name'] = spec_name + ':' + spec_value;
            spec_value_arr['sku_key'] = spec_key + ':' + key;
            all_spec[spec_key]['spec_name'].push(spec_value_arr);
          }
        })
      })
      ajaxGetSpecInput(all_spec);
    }

    function ajaxGetSpecInput(spec_arr) {
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/Goods/getSpecInput')}";
      https(url, {
        spec_arr: spec_arr
      }, 'post', 0, '').then(res => {
        $(".xk-spec-text").hide();
        if (res.resultData.html != '') {
          $(".xk-spec-value-show").html(res.resultData.html);
          $(".xk-spec-text").show();
          hbdyg();
        } else {
          $(".xk-spec-text").hide();
        }
      })
    }
    // 合并单元格
    function hbdyg() {
      var tab = document.getElementById("spec_input_tab"); //要合并的tableID
      var maxCol = 2,
        val, count, start; //maxCol：合并单元格作用到多少列
      if (tab != null) {
        for (var col = maxCol - 1; col >= 0; col--) {
          count = 1;
          val = "";
          for (var i = 0; i < tab.rows.length; i++) {
            if (val == tab.rows[i].cells[col].innerHTML) {
              count++;
            } else {
              if (count > 1) { //合并
                start = i - count;
                tab.rows[start].cells[col].rowSpan = count;
                for (var j = start + 1; j < i; j++) {
                  tab.rows[j].cells[col].style.display = "none";
                }
                count = 1;
              }
              val = tab.rows[i].cells[col].innerHTML;
            }
          }
          if (count > 1) { //合并，最后几行相同的情况下
            start = i - count;
            tab.rows[start].cells[col].rowSpan = count;
            for (var j = start + 1; j < i; j++) {
              tab.rows[j].cells[col].style.display = "none";
            }
          }
        }
      }
      rederUpload();
    }

    function rederUpload() {
      // 图片上传 普通版 不带裁剪
      upload.render({
        elem: '.xk-upload-pic',
        url: '/common/Upload/uploadImg',
        before: function(obj) {
          layer.load(2); //上传loading
        },
        done: function(res) {
          layer.closeAll('loading');
          var item = this.item;
          if (res.code != 200) {
            layer.msg(res.msg);
          }
          if (res.result_code != 200) {
            layer.msg(res.result_msg);
          }
          var button = '<button class="layui-btn layui-btn-danger layui-btn-sm xk-del-pic" type="button" name="button"><i class="layui-icon">&#xe640;</i></button>';
          item.attr('src', res.resultData['show_url']);
          item.siblings('.xk-picurl').val(res.resultData['upload_url']);
          item.parent('.xk-big-show').attr('datasrc', res.resultData['show_url']);
          item.parent('.xk-big-show').parent('.layui-upload').append(button);
        },
        error: function(res) {
          layer.closeAll('loading');
        }
      });
    }
    // ----------------
    // | 产品属性规格相关结束
    // ------------------------

  });
</script>
<!-- 页面js结束 -->
<!-- 规格属性js 开始 -->
<script type="text/javascript">
  function getAllSpec() {
    // 获取全部规格选项
    var all_spec = {};
    $(".xk-spec-value .layui-col-lg10").each(function(i, data) {
      var spec_key = $(this).attr('data-spec_key');
      all_spec[spec_key] = {};
      all_spec[spec_key]['spec_key'] = [];
      all_spec[spec_key]['spec_value'] = [];
      all_spec[spec_key]['spec_value_key'] = [];
      all_spec[spec_key]['name'] = $(this).find('label').text();
      $(this).find('.xk-spec-delete').each(function(index, res) {
        all_spec[spec_key]['spec_key'].push(spec_key + ':' + $(this).find('input[name="spec"]').attr('data-key'));
        all_spec[spec_key]['spec_value'].push($(this).find('input[name="spec"]').attr('title'));
        all_spec[spec_key]['spec_value_key'].push($(this).find('input[name="spec"]').attr('data-key'));
      })
    })
    return all_spec;
  }
</script>
<!-- 规格属性js 结束 -->
<!-- 产品参数开始 -->
<script type="text/javascript">
  // +-----------------
  // | 产品属性处理开始
  // +-------------------
  $(".add-parameters").click(function() {
    var html =
      '<tr><td><input type="text" name="attr_key[]" lay-verify="required" lay-reqtext="请输入参数名称" placeholder="请输入参数名称" autocomplete="off" class="layui-input"></td><td><input type="text" name="attr_value[]" lay-verify="required" lay-reqtext="请输入参数值" placeholder="请输入参数值" autocomplete="off" class="layui-input"></td><td><button type="button" class="layui-btn layui-btn-danger layui-btn-sm delete-parameters"><i class="layui-icon layui-icon-delete"></i></button></td></tr>';
    $(this).parents('tfoot').siblings('tbody').append(html);
  })
  $(".layui-table").on('click', '.delete-parameters', function(index, data) {
    $(this).parents('tr').remove();
  })
  // +--------------------
  // | 产品属性处理结束
  // +--------------------------
</script>
<!-- 产品参数结束 -->
{/block}
